<template>
  <view class="exchange-result">
    <customHeader
      class="custom-title"
      :title="''"
      :isCustomBack="true"
      @back="handleBackPrevPage"
    />
    <view
      v-if="!notStock"
      class="exchange-result-main"
      :class="notTeacherClass"
    >
      <view>
        <image :lazy-load="true" class="success_box" :src="success_box" />
        <view class="desc-title">
          恭喜您，兑换成功
        </view>
      </view>
      <view v-if="teacher.qrcode_url">
        <view class="desc-extra"> {{ teacher.copywriting }} </view>
        <image
          :lazy-load="true"
          class="qrcode"
          :src="teacher.qrcode_url"
          :show-menu-by-longpress="true"
        />
        <view class="qrcode-desc"> 微信号：{{ teacher.phone }} </view>
        <view class="copy-wechat" @tap="handleCopyWechat">
          复制微信号
        </view>
      </view>
      <finishButton :width="690" @click="handleGoonExchange">
        继续兑换
      </finishButton>
    </view>
    <view v-else class="not-goods">
      <image :lazy-load="true" :src="NOT_LOGIN_DEFAULT" />
      <view>太慢啦，商品已被抢光了</view>
      <view>前往兑换商城重新选择商品吧</view>
      <finishButton
        :width="300"
        :background-bg="smallButtonBg"
        @click="handleGoonExchange"
      >
        立即前往
      </finishButton>
    </view>

    <!-- toast提示 -->
    <at-toast
      :is-opened="is_opened"
      :text="toastText"
      :on-close="handleCloseToast"
    />
  </view>
</template>
<script>
import Taro from "@tarojs/taro";
import customHeader from "@/components/custom-header";
import finishButton from "@/components/finish-button/index";
import { smallButtonBg } from "@/libs/image-url";
/**未登录缺省页 */
const NOT_LOGIN_DEFAULT =
  "http://xthk-edu-test.oss-cn-shenzhen.aliyuncs.com/1607950083070_0.5918838635549786";
/** */
const success_box =
  "http://xthk-edu-test.oss-cn-shenzhen.aliyuncs.com/1608016350243_0.047078045573985206";
export default {
  components: {
    finishButton,
    customHeader
  },
  data() {
    return {
      smallButtonBg,
      NOT_LOGIN_DEFAULT,
      success_box,
      isEntityGoods: false,
      notStock: false,
      teacher: {}
    };
  },
  computed: {
    addTeacherDesc() {
      return this.isEntityGoods ? "实时追踪商品动态" : "获取一对一服务";
    },
    notTeacherClass() {
      return {
        "not-teacher": !this.teacher?.qrcode_url
      };
    }
  },
  onLoad({ notStock, isEntityGoods = false, teacher }) {
    this.teacher = teacher ? JSON.parse(teacher) : {};
    this.notStock = notStock;
    this.isEntityGoods = isEntityGoods;
  },
  methods: {
    handleCopyWechat() {
      // TODO:
      Taro.setClipboardData({
        data: this.teacher.phone,
        success: () => {
          this.$message("复制成功");
          // Taro.hideToast();
          // this.toastText = "复制成功";
          // this.is_opened = true;
        }
      });
      // Taro.getClipboardData({
      //         success: function (res) {
      //           console.log(res.data); // data
      //         },
      //       });
    },
    /**返回到兑换商城页面 */
    handleGoonExchange() {
      const pages = Taro.getCurrentPages();
      /**找到兑换商城的页面，返回兑换商城 */
      const exchangeStoreInd = pages.findIndex(
        i => i.route === "pages/exchange-store/index"
      );
      const delta = pages.length - exchangeStoreInd - 1;
      Taro.navigateBack({
        delta
      });
    },
    /**右上角返回 */
    handleBackPrevPage() {
      /**实体商品需返回的详情页 */
      const delta = this.isEntityGoods ? 2 : 1;
      Taro.navigateBack({ delta });
    }
  }
};
</script>
<style lang="scss">
@import "@/assets/scss/tools.scss";
.exchange-result {
  &-main {
    text-align: center;
    margin-top: 60px;
    .success_box {
      width: 460px;
      height: 260px;
      margin-bottom: 32px;
    }
    .desc-title {
      margin-bottom: 12px;
      @include base-text(56px, 40px, #333333);
    }
    .desc-extra {
      @include base-text(40px, 28px, #606266, 400);
      margin-bottom: 32px;
    }
    .qrcode {
      width: 320px;
      height: 320px;
      margin-bottom: 24px;
      &-desc {
        @include base-text(34px, 24px, #303133, 400);
        margin-bottom: 32px;
      }
    }
    .copy-wechat {
      width: 204px;
      background: #f5f5f5;
      border-radius: 200px;
      margin: 0 auto;
      line-height: 64px;
      @include base-text(64px, 28px, #303133, 500);
    }
    .finish-button {
      position: fixed;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  view.not-teacher {
    padding-top: 210px;
  }
  .not-goods {
    margin-top: 244px;
    text-align: center;
    image {
      width: 374px;
      height: 200px;
      margin-bottom: 48px;
    }
    view {
      &:nth-child(2) {
        margin-bottom: 16px;
        @include base-text(44px, 32px, #333333);
      }
      &:nth-child(3) {
        @include base-text(40px, 28px, #909399, 400);
        margin-bottom: 48px;
      }
    }
    .finish-button-wrap {
      margin: 0 auto;
    }
  }
}
</style>
